<template xmlns="http://www.w3.org/1999/html">
  <div class="dd">
    <el-form :model="form" label-width="auto">
      <el-form-item>
        <p>同城旅游已经向您的手机<span class="s1">{{form.phone}}</span>发送了注册验证码</p>
      </el-form-item>
      <el-form-item label="验证码" prop="code">
        <el-input v-model="form.code" style="width: 160px"/>
      </el-form-item>
      <el-form-item>
        <p><a href="javascript:void(0)" class="a1" @click="tz()">确认并提交注册</a></p>
      </el-form-item>
      <el-form-item>
        <a href="javascript:void(0)" class="aa">没有收到验证码？</a>
      </el-form-item>
    </el-form>
    <div class="d1">
      <p class="p1">验证手机常见问题</p>
      <p class="p1">问:&nbsp;为什么要进行手机验证？</p>
      <p class="p2">答:&nbsp;当您忘记密码时，可以通过验证手机找回密码，还可加快电话预定的速度。</p>
      <p class="p1">问:&nbsp;如果多次长时间收不到验证码怎么办？</p>
      <p class="p2">答:&nbsp;您可以尝试重新发送，若仍未收到，请查看手机是否装有防火墙拦截了短信。</p>
      <p class="p1">问:&nbsp;验证过的手机还可以修改吗？</p>
      <p class="p2">答:&nbsp;手机验证通过后，即生成同城账户。验证手机是可以修改的，修改后账户名也将一同修改为新手机号码。</p>
    </div>
    <div class="d2">
      <p class="pp">Copyright&nbsp;&copy;&nbsp;2002-2025 版权所有 同程网络科技股份有限公司</p>
      <p class="pp1">苏ICP证B2-20100204</p>
    </div>
  </div>
</template>

<script setup>
import {ref,onMounted} from "vue";
import {yz} from "@/api/wzz/vue3.js";
import {register} from "@/api/wzz/vue3.js";
import {useCounterStore} from "@/stores/counter.js";//引入pinia
import router from "@/router/index.js";//引入路由
const store = useCounterStore();//实例化pinia
const form=ref({//定义表单数据
  code:'',//定义验证码
  phone:store.userForm.phone,
  password:store.userForm.password,
})
const tz = async() => {
  if (form.value.code==''){
    ElMessage({
      message: '请输入验证码',
      type: 'warning',
    })
  }else {
    await yz(form.value.phone,form.value.code)
    console.log('开始注册请求')
    await register(form.value)
    store.addTz()//设置pinia中的值
    router.push('/register3')
  }
}

</script>
<style scoped>
.el-form{
  width: 400px;
  margin: 0 auto;
}
.a1{
  display: inline-block;
  width: 160px;
  height: 42px;
  text-align: center;
  background-color: #ff6257;
  border-radius: 3px;
  text-decoration: none;
  line-height: 42px;
  color: #fff;
  font-size: 16px;
  margin-left: 53px;
}
.s1{
  color:#ff6257 ;
}
.aa{
  text-decoration: none;
  line-height: 0;
  margin-left: 60px;
  color: #48A6D5;
  font-size: 12px;
}
.p1{
  font-size: 14px;
  font-weight: bold;
  margin-top: 10px;
  color: #31302E;
}
.p2{
  color: #818181;
  font-size: 14px;
}
.d1{
  width: 80%;
  height: 250px;
  padding-left: 200px;
  margin-top: 40px;
}
.d2{
  width: 80%;
  height: 70px;
  border-top: 1px solid #E2E2E2;
  margin: 0 auto;
  margin-top: 100px;
}
.pp{
  width: 360px;
  line-height: 40px;
  color: #999999;
  font-size: 12px;
  margin:0 auto;
}
.pp1{
  width: 150px;
  line-height: 1px;
  color: #999999;
  font-size: 12px;
  margin:0 auto;
}
</style>